@import "./reset.css";
@import "./base.scss";

@font-face {
  font-family: "Pang";
  src: url(../font/PangMenZhengDaoBiaoTiTi-1.ttf);
}

@font-face {
  font-family: "din";
  src: url(../font/Din.ttf);
}
@font-face {
  font-family: "loss";
  src: url(../font/UnidreamLED.ttf);
}

$color: green;

.color {
  color: #881b26;
}
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 100px;
}

body {
  overflow: hidden;
  font-family: "Microsoft YaHei";
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  // background-color: #f5f5f5;
}

/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-track {
  border-radius: 8px;
  // background-color: #eee;
}

/* 滑块颜色 */
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #eee;
}

.modular {
  width: 100%;
  // 原来的高度
  height: 2.85rem;
  // 笔记本适配的高度
  // height: 3.2rem;
  z-index: 1;
  border: 1px solid;
  border-image: linear-gradient(150deg, #32466d, #0e2a6d) 10 10;
  background: linear-gradient(
    -30deg,
    rgba(50, 70, 152, 0.9) 0%,
    rgba(14, 42, 109, 0.95) 100%
  );
  // opacity: 0.6;
  position: relative;

  .modular_top {
    position: absolute;
    top: 2.5%;
    left: -2%;
    width: 100%;
    height: 0.32rem;
    // padding: 9px 0;
    background: linear-gradient(-90deg, #1a3b7e 0%, #5588ee 100%);
    opacity: 0.8;
    overflow: hidden;
    display: flex;
    align-items: center;

    h2 {
      display: flex;
      align-items: center;

      span {
        font-size: 0.12rem;
        font-weight: 400;
        color: #fff;
        opacity: 0.8;
      }
    }

    .triangle {
      width: 0.14rem;
      height: 0.14rem;
      background: linear-gradient(0deg, #cef3ff 0%, #6cdbff 100%);
      transform: rotate(45deg) translate(-0.06rem, 0.06rem);
    }

    .modular_icon {
      img {
        width: 0.18rem;
        border-radius: 50%;
        margin: -0.25rem 0.09rem 0 0.07rem;
      }
    }

    h2 {
      font-size: 0.16rem;
      color: #fff;
      font-weight: 400;
    }

    .more {
      display: flex;
      align-items: center;
      position: absolute;
      right: 2%;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;

      h2 {
        color: #a4c2ff;
        opacity: 0.8;
        font-size: 0.12rem;
      }

      img {
        width: 0.1rem;
      }
    }
  }
}

// 报警监控
.el-table,
.el-table__expanded-cell {
  // background: red !important;
  font-size: 0.14rem !important;
  color: #fff !important;
  // background: linear-gradient(
  //   -30deg,
  //   rgba(14, 67, 107, 0.1) 0%,
  //   rgba(85, 136, 238, 0.5) 100%
  // );
  background-color: transparent !important; //这是设置透明背景色

  &::before {
    display: none;
  }
}

.el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border: none !important;
  text-align: center;
}

.el-table .cell {
  padding: 0 !important;
}

.el-table .el-table__cell {
  padding: 0.03rem 0 !important;
}

.el-table .warning-row {
  background: transparent !important;
}

/* 斑马纹 */
/* hover */
.el-table--enable-row-hover .el-table__body tr:hover {
  background-color: rgba(30, 56, 114, 0.5) !important;
}

/* .el-table th {
  background-color: #d5d5d5;
} */
/* 奇数行 */
.el-table__row:nth-of-type(odd) {
  background-color: rgba(30, 56, 114, 0.5) !important;
}

/* 偶数行 */
// .el-table__row:nth-of-type(even) {
//   background-color: #203a78 !important;
// }
.el-table .cell {
  line-height: 0.21rem !important;
}

// .el-table__body{}
canvas {
  width: 100% !important;
  height: 100% !important;
}

// 近七天水质检测
.el-tabs--card > .el-tabs__content {
  border: none;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  border: 1px solid #5b80d1;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  opacity: 0.8;
  border-radius: 3px;
  background-color: transparent;
  color: #fff;
  padding: 0 0.23rem !important;
  font-size: 0.1rem;
  height: 0.25rem;
  line-height: 0.25rem;
  margin: 0 0.1rem;
}

.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  color: #fff;
  background: linear-gradient(90deg, #0b4782 0%, #1869bc 50%, #0b4782 100%);
  border-radius: 3px;
}

.el-tabs--card > .el-tabs__header .el-tabs__item,
.el-tabs--card > .el-tabs__header .el-tabs__item:first-child,
.el-input__inner {
  border: 1px solid #2382bf !important;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  display: flex;
  padding-top: 0.54rem;
}

.el-cascader-menu__wrap {
  height: 100% !important;
}

// 视频监控
.video_cont {
  .el-input__inner {
    height: 0.25rem !important;
    line-height: 0.25rem !important;
    background: #1f356e !important;
    border: 1px solid #33549a !important;
    border-radius: 2px !important;
    color: #fff;
    font-size: 0.12rem;
  }

  .el-cascader .el-input {
    width: 95%;
    display: flex;
  }

  .el-input__suffix {
    display: flex;
    align-items: center;
  }
}

// 报表统计
.statistics_left {
  .el-tabs--left .el-tabs__item.is-left {
    text-align: right;
    color: #fff;
    font-size: 0.18rem;
    line-height: 0;
    margin-left: 0.45rem;
    height: 0.55rem;
    display: flex;
    align-items: center;
  }

  .el-tabs {
    height: auto !important;
  }

  .el-tabs--left .el-tabs__nav-wrap.is-left::after {
    display: none;
  }

  .el-tabs--left .el-tabs__active-bar.is-left {
    right: 69%;
    width: 0.03rem !important;
    height: 0.19rem !important;
    transform: translateY(0.1rem) !important;
    transition: 0.3s ease-in-out;
  }

  /*tabs 去掉el-tab-pane切换时的蓝色下划线*/
  .el-tabs__active-bar {
    // background-color: transparent !important;
  }
}

.pressure_cont,
.consume,
.police {
  .el-input__inner {
    background-color: transparent !important;
    height: 0.25rem;
    font-size: 0.12rem;
  }
}

.consume_btn {
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    padding: 0 0.1rem !important;
    font-size: 0.12rem;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    padding-top: 0;
  }
}

.police {
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    padding: 0 0.1rem !important;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    padding-top: 0;
  }

  .el-checkbox__label {
    color: #fff;
  }

  .cell {
    white-space: nowrap !important;
  }

  .btn-prev,
  .btn-next {
    color: #fff !important;
    background: linear-gradient(
      90deg,
      #0b4782 0%,
      #1869bc 50%,
      #0b4782 100%
    ) !important;
    border-radius: 3px;
    border: 1px solid #2382bf !important;
    padding: 0 0.1rem !important;
    font-size: 0.12rem;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    color: #fff !important;
    background: linear-gradient(
      90deg,
      #0b4782 0%,
      #1869bc 50%,
      #0b4782 100%
    ) !important;
    border-radius: 3px;
    border: 1px solid #2382bf !important;
  }

  .el-pagination.is-background .el-pager li {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid #fff;
    font-size: 0.12rem;
  }
}

.pressure_cont {
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__inner {
    background-color: transparent;
  }

  .el-checkbox__label {
    color: #fff;
  }

  .consume_btn .el-tabs--card > .el-tabs__header .el-tabs__item {
    padding: 0 0.1rem !important;
  }
}

.el-slider__button-wrapper {
  width: 0.14rem !important;
  height: 0.14rem !important;
  background: #50d5fd !important;
  box-shadow: 0px 0px 0.06rem 0px rgba(2, 88, 114, 0.5);
  border-radius: 50%;
  top: -0.04rem !important;
}

.el-tooltip__popper.is-dark {
  display: none;
}

.el-table {
  width: 100%;

  .el-table__header-wrapper table,
  .el-table__body-wrapper table {
    width: 100% !important;
  }

  .el-table__body,
  .el-table__footer,
  .el-table__header {
    table-layout: auto;
  }
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  .el-input__icon {
    line-height: 0 !important;
    margin-top: 0.015rem;
    font-size: 0.12rem;
    padding-left: 0.1rem;
  }
}

.left_select,.pressure_cont {
  .el-input--prefix .el-input__inner {
    padding-left: 0.4rem;
  }
  .el-range-editor .el-range-input {
    background: transparent;
    font-size: 0.12rem;
    color: #dcdfe6;
  }
}
.el-cascader .el-input .el-input__inner {
  color: #dcdfe6;
}
// .videoCascader {
//   .el-cascader-panel {
//     background: #1f356e !important;
//     border: 1px solid #708fe0 !important;
//     li {
//       border-bottom: 1px solid #708fe0;
//     }
//     span {
//       color: #fff;
//     }
//     .el-cascader-node:not(.is-disabled):hover {
//       background-color: #364e8d;
//     }
//   }
// }
// .staCascader {
//   .el-cascader-panel {
//     background: #0a2a69 !important;
//     border: 1px solid #708fe0 !important;
//     li {
//       border-bottom: 1px solid #708fe0;
//     }
//     span {
//       color: #fff;
//     }
//     .el-cascader-node:not(.is-disabled):hover {
//       background-color: #364e8d;
//     }
//   }
// }
// .el-cascader__dropdown {
//   background: #1f356e !important;
//   border: 1px solid #708fe0 !important;
//   li {
//     border-bottom: 1px solid #708fe0;
//   }
//   span {
//     color: #fff;
//   }
//   .el-cascader-node:not(.is-disabled):hover {
//     background-color: #364e8d;
//   }
// }
// .el-popper[x-placement^="bottom"] .popper__arrow::after {
//   border-bottom-color: #1f356e !important;
// }
// 0b2d70
.pressure {
  .consume_btn {
    .el-input__prefix {
      right: 0.05rem !important;
      left: auto !important;
    }
  }
  .el-checkbox-group {
    display: flex;
  }
}
.el-radio{
  color: #fff !important;
  margin-right: 0.08rem;
}
.el-popover--plain {
  padding: 0.05rem 0.1rem !important;
}
// .el-popover{
//   background: #023881 !important;
//   color:#fff !important;
//   opacity: 0.9 !important;
//   font-size: 0.16rem !important;
// }